<div layout="column" layout-fill class="settings-child-view">

    <div class="help-on-tabbed-view">
        <eb-help-icon template="app/components/ssl/trustedDomains/help-ssl-domains.template.html"></eb-help-icon>
    </div>

    <div layout-padding layout-margin></div>

    <div>
        <!-- Action bar of table -->
        <div layout="row" layout-xs="column" layout-align="start center">

            <div layout="row" style="width: 100%;">
                <div flex-xs="50" flex="33" layout="row" layout-align="start center" style="padding-left: 8px;">
                    <!-- WORK MODE -->
                    <div ng-if="!vm.tableEditMode">
                        <md-button ng-click="vm.newDomain($event)" class="md-raised md-accent">
                            {{ 'ADMINCONSOLE.TRUSTED_DOMAINS.ACTION.ADD' | translate }}
                        </md-button>
                    </div>

                    <!-- EDIT MODE -->
                    <div ng-if="vm.tableEditMode">
                        <table-remove-entries table-data="vm.filteredTableData"
                                              is-entry-deletable="vm.isDeletable(value)"
                                              on-bulk-delete="vm.bulkDelete(values)"
                                              on-bulk-delete-done="vm.getEnabledDomains(true)"
                                              button-label="ADMINCONSOLE.TRUSTED_DOMAINS.ACTION.REMOVE"
                                              button-tooltip="ADMINCONSOLE.TRUSTED_DOMAINS.TOOLTIP.REMOVE_BUTTON"
                                              dialog-title="ADMINCONSOLE.DIALOG.DELETE_ALL_TRUSTED_DOMAINS_CONFIRM.TITLE"
                                              dialog-text="ADMINCONSOLE.DIALOG.DELETE_ALL_TRUSTED_DOMAINS_CONFIRM.TEXT"
                                              dialog-text-undeletable="ADMINCONSOLE.DIALOG.DELETE_ALL_TRUSTED_DOMAINS_CONFIRM.TEXT_UNDELETABLE">
                        </table-remove-entries>
                    </div>

                    <div ng-if="vm.loading" layout="row" layout-align="start center">
                        <md-progress-circular md-mode="indeterminate"></md-progress-circular>
                    </div>
                </div>

                <div hide-xs flex="33" layout="row" layout-align="start center" style="width: 100%;">
                    <!-- TABLE SEARCH FOR LARGE DEVICES -->
                    <eb-filter-table filtered-data="vm.filteredTableData"
                                     original-data="vm.tableData"
                                     filter-properties="vm.searchProps">
                    </eb-filter-table>
                </div>

                <div flex-xs="50" flex="33" layout="row" layout-align="end center">
                    <!-- CHANGE EDIT MODE OF TABLE (makes entries selectable) -->
                    <eb-edit-table table-data="vm.filteredTableData"
                                   table-edit-mode="vm.tableEditMode">
                    </eb-edit-table>
                </div>
            </div>

            <div hide-gt-xs style="width: 100%;">
                <!-- TABLE SEARCH -->
                <eb-filter-table filtered-data="vm.filteredTableData"
                                 original-data="vm.tableData"
                                 filter-properties="vm.searchProps">
                </eb-filter-table>
            </div>
        </div>

        <!-- TABLE -->
        <eb-table table-data="vm.filteredTableData"
                  table-header="vm.tableHeaderConfig"
                  table-template="app/components/ssl/trustedDomains/trusted-domains-table.template.html"
                  table-id="vm.tableId"
                  edit-mode="vm.tableEditMode"
                  is-entry-selectable="vm.isSelectable(value)"
                  small-table-header-limit="5">
        </eb-table>

        <!-- ACTIONS VISIBLE IN EDIT MODE -->
        <div layout="row" layout-align="start center" ng-show="vm.tableEditMode" layout-margin>
            <eb-scroll-paginator table-id="vm.tableId"
                                 table-size="vm.filteredTableData.length">
            </eb-scroll-paginator>
        </div>

    </div>
</div>
